<template>
  <div class="onlineTable">
    <div class="onlineTable_top">
      <div class="onlineTable_top_id size_id center">序号</div>
      <div class="onlineTable_top_basic size_basic center">基础信息</div>
      <div class="onlineTable_top_describe size_describe center">病情描述</div>
      <div
        class="onlineTable_top_stayTime size_stayTime center"
        :class="{ isShow: isbooking }"
      >
        等待时长
      </div>
    </div>
    <div class="onlineTable_body">
      <div
        class="onlineTable_body_item"
        @click="toToast(item)"
        v-for="item in list"
        :key="item.id"
      >
        <div class="size_id center">{{ item.id }}</div>
        <div class="size_basic center">
          <div class="size_basic_name van-ellipsis">
            {{ item.userInfo.name }}
          </div>
          <div class="size_basic_sex">
            {{ item.userInfo.sex }},{{ item.userInfo.age }}岁
          </div>
        </div>
        <div class="size_describe van-multi-ellipsis--l2">
          {{ item.content }}
        </div>
        <div class="size_stayTime center">{{ item.stay }}</div>
      </div>
      <div class="onlineTable_bottom">最多展示十位患者</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isbooking: {
      type: Boolean,
      default() {
        return false;
      },
    },
    list: {
      type: Array,
      required: true,
      dafault() {
        return [];
      },
    },
  },
  name: "onlineTable",
  setup(props, { emit }) {
    function toToast(item) {
      emit("listenClick", item);
    }
    return {
      toToast,
    };
  },
};
</script>

<style lang="scss" scope>
.center {
  text-align: center;
}
.isShow {
  visibility: hidden;
}
.size {
  &_id {
    width: 15%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  &_basic {
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    &_name {
      font-weight: 540;
      font-size: 16px;
    }
    &_sex {
      font-size: 12px;
    }
  }
  &_describe {
    width: 40%;
    font-size: 15px;
  }
  &_stayTime {
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.onlineTable {
  width: 100%;
  &_bottom {
    margin-top: 50px;
    font-size: 12px;
    text-align: center;
    color: #d4cfcf;
  }
  &_body {
    &_item {
      height: 65px;
      width: 100%;
      max-height: 70px;
      padding: 20px 0 10px 0;
      position: relative;
      display: flex;
      &::after {
        content: "";
        width: 90%;
        height: 1px;
        background-color: #ccc;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
  &_top {
    padding: 10px 0;
    display: flex;
    background-color: #e5e5e5;
    font-size: 14px;
    font-weight: 550;
  }
}
</style>
